<template>
  <div class="login">
    <form method="post" onsubmit="return func()">
      <div class="formItem flex">
        <label for="name">
          <img src="../../assets/images/icon/user.png" />
        </label>
        <input
          type="number"
          name="name"
          id="name"
          v-model="phone"
          placeholder="请输入手机号"
          required
        />
      </div>
      <div class="formItem flex">
        <label for="password">
          <img src="../../assets/images/icon/password.png" />
        </label>
        <input
          type="password"
          name="password"
          id="password"
          v-model="password"
          placeholder="请输入密码"
          required
        />
      </div>
      <div class="flex justify-between opertion">
        <!-- <div></div> -->
        <div class="default-color">没有注册的用户将直接登录</div>
      </div>
      <button @click="login" type="button">登录</button>
    </form>
  </div>
</template>

<script>
import userApi from "@/API/userApi.js";
import { error, success } from "@/utils/message";
import { debounce } from "@/utils/utils";
export default {
  name: "login",
  data() {
    return {
      phone: "",
      password: ""
    };
  },
  methods: {
    switchRegister() {
      this.$emit("switchRegister");
    },
    login() {
        this.loginWithPassword();
    },
    //密码登录
    loginWithPassword: debounce(async function () {
      let loading = this.$loading({
        target: ".login",
        lock: true,
      });
      try {
        if (!this.phone) throw new Error(`请填写手机号`);
        let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!reg.test(this.phone)) throw new Error(`手机号格式错误`);
        if (!this.password) throw new Error(`请填写密码`);
        let params = {
          phone: this.phone,
          password: this.password,
        };
        let { data } = await userApi.login(params);
        loading.close();
        success(`登录成功`);
        localStorage.setItem("hasLogin", true);
        setTimeout(() => {
          this.$router.push({ path: "/" });
        }, 500);
      } catch (err) {
        loading.close();
        error(`${err}` || "服务器错误，请联系管理员");
      }
    }),
  },
};
</script>

<style scoped>
form {
  width: 324px;
  margin: 0 auto;
}
.formItem {
  border-bottom: 1px solid #e2e2e2;
  padding: 10px 0 15px 5px;
  margin-top: 15px;
  position: relative;
}
.formItem img {
  width: 20px;
  height: 20px;
}
.formItem input {
  border: none;
  flex: 1;
  margin-left: 20px;
  letter-spacing: 2px;
  background: #ffffff;
  outline: none;
  -webkit-appearance: button;
  -webkit-appearance: none;
}
.formItem span {
  display: inline-block;
  /* width: 99px; */
  height: 26px;
  background: #f4f4f4;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #02b2b5;
  line-height: 26px;
  position: absolute;
  right: 0;
  padding: 0 8px;
  text-align: center;
  letter-spacing: 2px;
  cursor: pointer;
}
input::-webkit-input-placeholder {
  color: #999999;
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #999999;
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #999999;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #999999;
}
.opertion {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 60px;
}
.opertion div {
  cursor: pointer;
}
button {
  width: 324px;
  outline: none;
  border: none;
  height: 50px;
  line-height: 50px;
  background: #02b2b5;
  text-align: centers;
  font-size: 18px;
  color: #ffffff;
  /* margin-top: 10px; */
  cursor: pointer;
}
</style>
